// 引入 axios
/* eslint-disable-next-line */
// import axios from 'axios'

export default {
  data () {
    return {
      userList: [
        {
          username: '王小虎',
          email: 'wangxiaohu.com',
          mobile: '1233211234567'
        }
      ],
      // 总条/个数
      total: 0,
      // 当前页数
      pagenum: 1,
      // 查询数据
      input5: '',
      // 显示添加用户的布尔值
      dialogAddUserVisible: false,
      // 添加用户的表单对象数据
      addUserForm: {
        username: '',
        password: '',
        email: '',
        mobile: ''
      },
      // 校验
      rules: {
        // 去找 上面的 prop
        username: [
          // 如果不填写数据会触发
          // required: true 必填项
          // trigger: 'blur'  失去焦点触发
          { required: true, message: '请输入用户名', trigger: 'blur' },
          // 如果格式不正确会 触发
          { min: 3, max: 5, message: '长度在 3 到 5 个字符', trigger: 'blur' }
        ],
        password: [
          // 如果不填写数据会触发
          // required: true 必填项
          // trigger: 'blur'  失去焦点触发
          { required: true, message: '请输入密码', trigger: 'blur' },
          // 如果格式不正确会 触发
          { min: 6, max: 10, message: '长度在 6 到 10 个字符', trigger: 'blur' }
        ],
        email: [
          {
            pattern: /^[a-zA-Z0-9_.-]+@[a-zA-Z0-9-]+(.[a-zA-Z0-9-]+)*.[a-zA-Z0-9]{2,6}$/,
            message: '邮箱格式不正确',
            trigger: 'blur'
          }
        ],
        mobile: [
          {
            pattern: /^1(3|4|5|7|8)\d{9}$/,
            message: '手机格式不正确',
            trigger: 'blur'
          }
        ]
      },
      // 显示编辑对话框
      dialogEditUserVisible: false,
      editUserForm: {
        id: 0,
        username: '',
        email: '',
        mobile: ''
      },
      // 展示分配角色对话框布尔值
      dialogAssignRoleVisible: false,
      assignRoleForm: {
        username: '',
        rid: ''
      },
      // 角色列表数据
      rolesList: []
    }
  },
  created () {
    // this.loadUsersList(this.pagenum)

    // 拿到路径里的参数 page
    let curPage = this.$route.params.page
    console.log(curPage)

    this.loadUsersList(curPage)
    this.loadRolesList()
  },

  watch: {
    $route (to) {
      console.log(to.params.page)
      this.loadUsersList(to.params.page, this.input5)
    }
  },

  methods: {
    /**
     * 获取用户 列表数据
     */
    async loadUsersList (pagenum = 1, query = '') {
      let options = {
        params: {
          query,
          pagenum,
          pagesize: 2
        }
      }
      let res = await this.$axios.get(
        // 'http://localhost:8888/api/private/v1/users',
        '/users',
        options
      )

      // 用户列表
      this.userList = res.data.data.users
      // 总页数
      this.total = res.data.data.total
      // 当前页
      this.pagenum = res.data.data.pagenum

      // axios
      //   .get('http://localhost:8888/api/private/v1/users', {
      //     params: {
      //       query,
      //       pagenum,
      //       pagesize: 2
      //     },
      //     headers: {
      //       Authorization: localStorage.getItem('token')
      //     }
      //   })
      //   .then(res => {
      //     console.log(res)
      //     // 用户列表
      //     this.userList = res.data.data.users
      //     // 总页数
      //     this.total = res.data.data.total
      //     // 当前页
      //     this.pagenum = res.data.data.pagenum
      //   })
      // axios
      //   .get('http://localhost:8888/api/private/v1/users', {
      //     params: {
      //       query,
      //       pagenum,
      //       pagesize: 2
      //     },
      //     headers: {
      //       Authorization: localStorage.getItem('token')
      //     }
      //   })
      //   .then(res => {
      //     console.log(res)
      //     // 用户列表
      //     this.userList = res.data.data.users
      //     // 总页数
      //     this.total = res.data.data.total
      //     // 当前页
      //     this.pagenum = res.data.data.pagenum
      //   })
    },
    /**
     * 点击页数
     */
    pageChanged (curPage) {
      // console.log(curPage)

      this.$router.push('/users/' + curPage)

      // this.loadUsersList(curPage, this.input5)
    },
    /**
     * 开始 查询
     */
    startQuery () {
      // console.log('开始查询', this.input5)
      this.loadUsersList(1, this.input5)
    },
    /**
     * 删除用户
     */
    async delUser (id) {
      // console.log(id)

      try {
        await this.$confirm('此操作将永久删除该用户, 是否继续?', '提示', {
          confirmButtonText: '确定',
          cancelButtonText: '取消',
          type: 'warning'
        })

        console.log('点击了确定')

        let res = await this.$axios.delete('users/' + id)

        console.log(res)

        if (res.data.meta.status === 200) {
          this.$message({
            message: res.data.meta.msg,
            type: 'success'
          })
        }

        this.loadUsersList(1, '')
      } catch (error) {
        console.log('点击了取消')
      }

      // .then(() => {
      //   this.$message({
      //     type: 'success',
      //     message: '删除成功!'
      //   })
      // })
      // .catch(() => {
      //   this.$message({
      //     type: 'info',
      //     message: '已取消删除'
      //   })
      // })
    },

    /**
     * 状态改变
     */
    async stateChange (row) {
      // 发送状态
      // 需要id 和 mg_state
      console.log(row)
      // 1. 拿到对象里的状态和id
      const id = row.id
      const mgState = row.mg_state

      // 2. 发送请求
      let res = await this.$axios.put(`users/${id}/state/${mgState}`)
      console.log(res)
      if (res.data.meta.status === 200) {
        this.$message({
          message: res.data.meta.msg,
          type: 'success'
        })
      }
    },
    /**
     * 显示添加用户对话框
     */
    showAddUserDialog () {
      this.dialogAddUserVisible = true
    },
    /**
     * 添加用户
     */
    async addUser () {
      // 1. 发送请求
      let res = await this.$axios.post('users', this.addUserForm)
      console.log(res)

      // 2. 关闭对话框
      this.dialogAddUserVisible = false

      // 3. 添加成功的提示信息
      this.$message({
        message: res.data.meta.msg,
        type: 'success'
      })

      // 4. 重新刷新列表
      this.loadUsersList(1, '')
    },
    /**
     * 显示编辑用户对话框
     */
    showEditUserDialog (row) {
      const { id, username, email, mobile } = row
      this.editUserForm.id = id
      this.editUserForm.username = username
      this.editUserForm.email = email
      this.editUserForm.mobile = mobile

      // 此时,应该拿到数据了
      this.dialogEditUserVisible = true
    },
    /**
     * 编辑用户
     */
    async editUser () {
      const { id, email, mobile } = this.editUserForm

      // 1. 发送请求
      let res = await this.$axios.put('users/' + id, {
        email,
        mobile
      })
      console.log(res)
      // 2. 关闭对话框
      this.dialogEditUserVisible = false
      // 3. 提示修改成功
      this.$message({
        message: res.data.meta.msg,
        type: 'success'
      })
      // 4. 刷新列表
      this.loadUsersList(1, '')
    },
    /**
     * 关闭添加用户对话框时触发
     */
    addUserDialogClosed () {
      console.log('关闭 了')

      // 表单.重置()
      this.$refs.addUserFormRef.resetFields()
    },
    /**
     * 显示分配角色对话框
     */
    async showAssignRoleDialog (row) {
      // 1. 把row用户对象里面需要的都拿过来交给assignRoleForm
      // 当前用户的id需要 , 用户名需要, 自己之前的角色id需要
      const { id, username } = row
      this.assignRoleForm.id = id
      this.assignRoleForm.username = username

      // 当前用户列表数据对应的对象只有id和username,没有 角色id, 尝试一下使用 id => 查看自己的全部信息
      // 2.  根据 ID 查询用户信息
      let res = await this.$axios.get('users/' + id)
      console.log(res.data.data.rid)
      this.assignRoleForm.rid =
        res.data.data.rid === -1 ? '' : res.data.data.rid

      this.dialogAssignRoleVisible = true
    },
    /**
     * 1. 获取所有的角色列表数据
     */
    async loadRolesList () {
      let res = await this.$axios.get('roles')
      console.log('角色列表数据 :', res.data.data)
      this.rolesList = res.data.data
    },
    /**
     * 开始分配角色
     */
    async startAssignRole () {
      const { id, rid } = this.assignRoleForm

      let res = await this.$axios.put('users/' + id + '/role', {
        rid
      })
      console.log(res)
      // 关闭 对话框
      this.dialogAssignRoleVisible = false

      // 提示分配角色成功
      this.$message({
        message: '分配角色成功',
        type: 'success'
      })

      // 刷新列表
      this.loadUsersList(1, '')
    }
  }
}
